<template>
	<view class="content">
		<!-- 门店信息 -->
		<view class="info">
			<view class="search">
				<input class="inpt" placeholder="搜索!!!" />
			</view>
			<view class="store">
				<view class="left">
					<h2 class="title">
						美年广场Go店 >
					</h2>
					<span>距离您15.4km</span>
				</view>
			</view>
		</view>
		<!-- 产品信息 -->
		<view class="product">
			<view class="left">
				<view class="item" :class="selectMenu == 0 ? 'selectMenuClass' : null " @click="editMenu(0)">
					<image src="/static/hb.png"></image>
					<span :class="selectMenu == 0 ? 'selectSpan' : null ">夏日限定</span>
				</view>
				<view class="item" :class="selectMenu == 1 ? 'selectMenuClass' : null " @click="editMenu(1)">
					<image src="/static/kl.png"></image>
					<span :class="selectMenu == 1 ? 'selectSpan' : null ">水果茶</span>
				</view>
				<view class="item" :class="selectMenu == 2 ? 'selectMenuClass' : null " @click="editMenu(2)">
					<image src="/static/qkl.png"></image>
					<span :class="selectMenu == 2 ? 'selectSpan' : null ">奶茶</span>
				</view>
				<view class="item" :class="selectMenu == 3 ? 'selectMenuClass' : null " @click="editMenu(3)">
					<image src="/static/bd.png"></image>
					<span :class="selectMenu == 3 ? 'selectSpan' : null ">热饮</span>
				</view>
				<view class="item" :class="selectMenu == 4 ? 'selectMenuClass' : null " @click="editMenu(4)">
					<image src="/static/bbt.png"></image>
					<span :class="selectMenu == 4 ? 'selectSpan' : null ">冰淇淋</span>
				</view>
			</view>
			<view class="right">
				<view class="pro-adv">
					<image src="https://placehold.co/350x200"></image>
				</view>
				<view class="pro-adv">
					<image src="https://placehold.co/350x200"></image>
				</view>
				<view style="height: 20rpx;"></view>
				<view class="item" @click.stop="toPage('/pages/product/detail')">
					<view class="logo">
						<image src="https://placehold.co/60x100"></image>
					</view>
					<view class="detail">
						<view class="title">
							<h2>芒芒甘露冰棒</h2>
						</view>
						<view class="tags">
							<span>新品</span>
							<span>含乳制品</span>
						</view>
						<view class="desc">
							<span>人气多肉芒芒甘露变身冰棒。爽口芒芒冰壳中夹有爱文芒果果肉与酸甜</span>
						</view>
						<view class="option" >
							<view class="price">
								<span>￥15</span>
							</view>
							<view class="icon">
								<image src="/static/jiahao.png" @click.stop="addProduct"></image>
								<span v-if="catFlag > 0">{{catFlag}}</span>
								<image v-if="catFlag > 0" src="/static/jianhao.png" @click.stop="subCatNum"></image>
							</view>
						</view>
					</view>

				</view>
				<view class="middle"></view>
			</view>
		</view>
		<!-- 结算 -->
		<view class="pro-list" v-if="proFlag">
			<!-- 购物车订单操作仪表 -->
			<view class="pro-item-option">
				<radio color="#777777" value="r2" :checked="proAll" @click="radioChange">全选 </radio>
				<text @click="clearProAll">清理购物车</text>
			</view>
			<view class="pro-list-item">
				<view class="option">
					<radio color="#777777" :checked="proAll" value="123" />
				</view>
				<view class="left">
					<view class="left-img">
						<image src="/static/sy.png"></image>
					</view>
					<view class="left-text">
						<span class="left-text-title">夏日限定奶茶</span>
						<span class="left-text-price">￥18</span>
					</view>
				</view>
				<view class="right">
					<image src="/static/jianhao.png" @click="subCatNum"></image>
					<span>{{catFlag}}</span>
					<image src="/static/jiahao.png" @click="addCatNum"></image>
				</view>
			</view>
		</view>
		<!-- v-if="catFlag > 0" -->
		<view class="settle" >
			<view class="left">
				<view class="cat-icon" @click="openProList">
					<image src="/static/zq.png"></image>
					<view class="horn-icon">{{catFlag}}</view>
				</view>
				<view class="cat-price">￥15</view>
			</view>
			<view class="rigth">结算</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectMenu: 0,
				catFlag: 0,
				proFlag: false,
				proAll: false
			}
		},
		methods: {
			toPage(url){
				uni.navigateTo({
					url:url
				})
			},
			clearProAll() {
				this.catFlag = 0;
				this.proFlag = false
			},
			radioChange(event) {
				this.proAll = !this.proAll;
			},
			//切换菜单
			editMenu(opt) {
				this.selectMenu = opt
			},
			// 添加商品
			addProduct() {
				this.catFlag++;
			},
			//打开产品列表
			openProList() {
				this.proFlag = !this.proFlag
			},
			//加减法
			subCatNum() {
				this.catFlag--;
				if (this.catFlag <= 0) {
					this.proFlag = false
				}
			},
			addCatNum() {
				this.catFlag++
			}
		}
	}
</script>
<style scoped lang="less">
	html,
	body,
	.content {
		overflow: hidden;

		.pro-list {
			background-color: #f0f0f0;
			position: fixed;
			bottom: 51px;
			width: 100%;

			.pro-item-option {
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				border-top-right-radius: 10px;
				border-top-left-radius: 10px;
				box-shadow: #ececec 1px 0px 8px 0px;
				padding: 20rpx;
				color: black;
				font-size: 15px;

				radio {
					transform: scale(80%);
					display: inline-block;
				}

				text {
					display: inline-block;
				}

				border-bottom: #e9e9e9 1rpx solid;
			}

			.pro-list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				padding: 50rpx 0px;
				background-color: #fff;

				.option {
					radio {
						transform: scale(80%);
					}

					padding: 20rpx;
				}

				.left {
					display: flex;
					align-items: center;
					align-content: center;
					margin-left: 20rpx;
					flex-grow: 1;

					.left-img {
						image {
							width: 48px;
							height: 48px;
						}
					}

					.left-text {
						display: flex;
						flex-direction: column;

						.left-text-title {
							font-size: 15px;
							font-weight: 400;
						}
					}
				}

				.right {
					display: flex;
					justify-content: space-between;
					align-content: center;
					align-items: center;
					margin-top: 50rpx;

					image {
						width: 22px;
						height: 22px;
						padding: 0px 30rpx;
					}

					span {
						font-size: 18px;
					}
				}
			}
		}

		.settle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			width: 100%;
			position: fixed;
			bottom: 0px;

			.left {
				width: 70%;
				height: 100%;
				background-color: #f2f2f2;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.cat-icon {
					position: relative;
					top: -6px;
					border-radius: 50%;
					// overflow: hidden;
					left: 40px;
					padding: 5px;
					background-color: #fff;
					box-shadow: 0px 0px 7px -4px black;

					image {
						width: 40px;
						height: 40px;
					}

					.horn-icon {
						position: absolute;
						top: -6px;
						right: 0px;
						background-color: #dba871;
						border-radius: 50%;
						height: 20px;
						overflow: hidden;
						width: 20px;
						text-align: center;
						font-size: 12px;
						color: #Fff;
					}
				}

				.cat-price {
					margin-left: 100rpx;
					font-size: 18px;
					letter-spacing: -2px;
					font-weight: 600;
				}
			}

			.rigth {
				width: 30%;
				height: 100%;
				background-color: #dba871;
				color: #fff;
				text-align: center;
				line-height: 45px;
			}
		}

		.product {
			display: flex;
			justify-content: space-between;
			height: calc(100vh - 200px);
			
			.right {
				width: 75%;
				overflow-y: auto;
				height: 100%;
				 margin-top: 20rpx;
				
				.pro-adv{
					margin-left: 20rpx;
					margin-right: 20rpx;
					overflow: hidden;
					image{
						width: 550rpx;
						height: 300rpx;
					}
				}
				
				.middle {
					width: 95%;
					height: 1px;
					background-color: #f2f2f2;
					margin: 0px auto;
				}

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					overflow: scroll;
					scrollbar-width: none;
					/* Firefox */
					-ms-overflow-style: none;

					.logo {
						width: 20%;
						// height: 150rpx;
						overflow: hidden;
						margin: 0px auto;

						image {
							width: 120rpx;
							height: 220rpx;
						}


					}

					.detail {
						width: 70%;

						.title {
							font-size: 20px;
							font-weight: 400;
						}

						.tags {
							font-size: 12px;
							color: #b6babc;
							padding: 5px 0px;

							span {
								display: inline-block;
								background-color: #eeffe8;
								padding: 5px;
								margin-right: 5px;
								color: #84c682;
								font-size: 10px;
							}
						}

						.desc {
							font-size: 12px;
							word-break: break-word;
							color: #b1b1b1;
							padding-right: 10px;
						}

						.option {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price {
								font-size: 18px;
								color: red;
								font-weight: 400;
								letter-spacing: -2px;
							}

							.icon {
								padding: 10px;
								margin-top: 5px;
								display: flex;
								justify-content: center;
								align-items: center;
								
								image {
									width: 25px;
									height: 25px;
									padding: 0px 20rpx;
								}
								font-size: 18px;
							}
						}
					}
				}


			}

			.left::-webkit-scrollbar {
				display: none;
			}

			.right::-webkit-scrollbar {
				display: none;
			}


			.left {
				width: 25%;
				background-color: #f6f6f6;
				overflow-y: scroll;
				height: 100%;
				scrollbar-width: none;
				/* Firefox */
				-ms-overflow-style: none;

				/* IE/Edge */
				.selectMenuClass {
					background-color: #fff;
				}

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 10px 0px;

					image {
						width: 32px;
						height: 32px;
					}
					.selectSpan{
						color: black !important;
					}
					span {
						margin-top: 5px;
						font-size: 16px;
						color: #b1b1b1;
					}
				}
			}
		}

		.info {

			//width: 645rpx;
			margin: 0 auto;
			margin-top: 45px;
			overflow: hidden;
			border-bottom: 1px #f0f0f0 solid;
			padding: 10px 20px;

			.store {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 15px;

				.left {
					h2 {
						font-size: 20px;
						font-weight: 600;
					}

					span {
						font-size: 12px;
						color: #b6babc;
					}
				}
			}

			.search {


				.inpt {
					background-color: #f2f2f2;
					width: 400rpx;
					height: 70rpx;
					border-radius: 20px;
					padding: 0px 20px;

					letter-spacing: 1px;
					// font-size: 13px;
				}
			}
		}

	}
</style>